<template>
    <div>
        <el-main>
            <el-row :gutter="20">
                <el-col :span="24">
                    <el-page-header @back="goBack">
                    </el-page-header>
                </el-col>
                <el-col :span="14" :offset="5">
                    <el-row :gutter="20" style="border-style: groove; border-radius: 5px;border: 2px solid;">
                        <el-col :span="24" style="line-height:50px">
                            <el-image style="width:100%; height:400px;text-align: center;" :src="detailData.image"
                                fit="cover">
                            </el-image>
                        </el-col>
                        <el-col :span="18" :offset="3" style="line-height: 20px;">
                            <el-row :gutter="20">
                                <el-col :span="20">
                                    <span class="font"
                                        style="color:red;font-size: large;float: left;">￥{{detailData.price}}</span>
                                </el-col>
                                <br><br>
                                <el-col :span="20">
                                    <span class="font"
                                        style="color:black;font-size: medium;float: left;font-weight: 600;">{{detailData.name}}
                                        {{detailData.description}}</span>
                                </el-col>
                                <br><br>
                                <el-col :span="2" :offset="22">
                                    <el-button @click="dialogFormVisible = true" icon="el-icon-platform-eleme"
                                        type="success">购买</el-button>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
            <el-empty :image-size="200"></el-empty>
            <el-dialog title="口味选择" :visible.sync="dialogFormVisible" style="line-height:normal">
                <!-- 取消口味选择确认 -->
                <el-dialog width="30%" title="取消" :visible.sync="cancelVisible" append-to-body>
                    <h1 style="line-height:30px;padding-top: 0%;">确认取消购买吗？</h1>
                    <el-button @click="cancelVisible = false">取 消</el-button>
                    <el-button type="primary" @click="cancelVisible = false">确 定 </el-button>
                </el-dialog>

                <el-form :model="form">
                    <el-form-item label="菜品" :label-width="formLabelWidth">
                        <el-input v-model="detailData.name" autocomplete="off" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="口味" :label-width="formLabelWidth">
                        <el-select v-model="dishFlavor.flavor1" placeholder="请选择口味">
                            <el-option label="微辣" value="微辣"></el-option>
                            <el-option label="中辣" value="中辣"></el-option>
                            <el-option label="特辣" value="特辣"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="忌口" :label-width="formLabelWidth">
                        <el-select v-model="dishFlavor.flavor2" placeholder="请选择忌口">
                            <el-option label="不要葱" value="不要葱"></el-option>
                            <el-option label="不要蒜" value="不要蒜"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false,cancelVisible = true">取 消</el-button>
                    <el-button type="primary" @click="onSubmit">确 定</el-button>
                </div>
            </el-dialog>
        </el-main>
    </div>
</template>
<script>
import {getDetailData,cancel} from '@/utils/modules/customer.js'
export default {
    mounted() {
        this.form.id = this.$route.query.id
        this.getDetailData()
    },
    data() {
        return {
            form: {
                id: '',
            },
            detailData: {
                
            },
            dishFlavor:{
                flavor1: '',
                flavor2: ''
            },
            dialogFormVisible: false,
            cancelVisible: false,
            formLabelWidth: '120px',
            hasShoppingCartId:false,
            isEmpty:false
        }
    },
    methods: {
        getDetailData() {
            getDetailData(this.form).then(res => {
                this.detailData = res.data
                this.detailData.dishId = res.data.id
                delete this.detailData.id
                if(this.$route.query.shoppingCartId){
                    this.hasShoppingCartId = true
                }
            }).catch(err => {
                this.$message({
                    type: 'error',
                    message: err.message,
                    showClose: true
                })
            })
        },
        onSubmit() {
            if(this.hasShoppingCartId){
                cancel({id:this.$route.query.shoppingCartId}).then(res=>{
                    console.log('删除成功')
                }).catch(err=>{
                    this.$message({
                        type:'error',
                        message:err.message,
                        showClose:true
                    })
                })
            }
            this.dialogFormVisible = false
            this.detailData.flavor= this.dishFlavor.flavor1+','+this.dishFlavor.flavor2
            let _that = this
            // 跳转到下一个支付页面
            this.$router.push({
                path:'/pay',
                query:{
                    order:_that.detailData
                }
            })
        },
        goBack() {
            this.$router.go(-1)
        }
    }
}
</script>
<style>
.font {
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
</style>